
.#{$prefix}-metro-group {
  position: relative;
  width: $tileSize * $tileGroupColumn + $tileMargin * ($tileGroupColumn * 2);
  margin: 5px 10px;
  display: inline-block;
  -webkit-transition: all .2s;
  -webkit-transition-delay: 0;
  transition: all .2s;
  transition-delay: 0;
  -ms-transition: all .2s;
  -ms-transition-delay: 0; 
  vertical-align: top;
  transform: translateX(50px) scale(0.8);
  transition-timing-function:ease-in-out;
  transform-origin : right center;
  opacity:0; 
}

.#{$prefix}-ie9 .#{$prefix}-metro-group{
    transform: translateX(0px) scale(1);
    opacity:0; 
}

.#{$prefix}-metro-group-title{
    height : 30px;
    width: $tileSize * $tileGroupColumn + $tileMargin * ($tileGroupColumn * 2);
    margin : 3px auto;
    color : $color;
    padding:5px 0px 5px 8px;
    cursor:default;
    text-align: left;
    position: relative;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.#{$prefix}-metro-group-title:hover{
    background-color: rgba($bgcolorR, $bgcolorG, $bgcolorB,0.8);
}

.#{$prefix}-metro-group-dd-proxy{
    cursor: move;
    background-color: rgba($bgcolorR, $bgcolorG, $bgcolorB,0.8);
    height : 30px;
    width: $tileSize * $tileGroupColumn + $tileMargin * ($tileGroupColumn * 2);
    display: block;
    z-index:999;
}
.#{$prefix}-metro-group-title-editor{
    position: absolute;
    top: 1px;
    left: 0px;
    bottom: 1px;
    width:100%;
    height:28px;
    display: none;
    z-index:2;
    padding:7px;
}